<template>
	<view class="container">
		<view class="top">
			<view class="date-picker">

				<picker mode="date" :value="date" fields="year" @change="bindDateChange">
					<!-- <view class="uni-input">{{date}}</view> -->
					<view class="picker-year">
						{{date}}年 <image src="/static/icon/down_icon.png" mode="widthFix" class="down"></image>
					</view>

				</picker>
			</view>
			<view class="box">
				<view class="box-item">
					<image src="../../static/icon/success_icon.png" mode="widthFix"></image>
					<view class="">
						成功
					</view>
					<view class="money">
						<text class="unit">￥</text>{{orderItem.successAmount}}
					</view>
					<view class="slash">
						/
					</view>
					<view class="">
						<text class="num">{{orderItem.successCount}}</text>笔
					</view>
				</view>
				<view class="box-item">
					<image src="../../static/icon/fail_icon.png" mode="widthFix"></image>
					<view class="">
						失败
					</view>
					<view class="money">
						<text class="unit">￥</text>{{orderItem.failAmount}}
					</view>
					<view class="slash">
						/
					</view>
					<view class="">
						<text class="num">{{orderItem.failCount}}</text>笔
					</view>
				</view>

			</view>
		</view>

		<!-- 列表 -->
		<view class="listBox">
			<scroll-view class="list-wrapper" scroll-y="true" :refresher-enabled="true"
				:refresher-triggered="isRefreshing" @refresherrefresh="refresh" @scrolltolower="loadMore"
				v-if="listData.length > 0">
				<view class="card-wrapper" v-for="(item, index) in listData" :key="index" @click="onItemClick(item)">
					<view class="left">
						<view class="dateBox">
							{{ item.transTime}}
						</view>
						<view class="detail">
							<view class="">
								详情
							</view>
							<image src="/static/icon/right.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="item">
						<view class="">成功
						</view>
						<view class="moneyNum"><text class="unit">￥</text>{{ item.successAmount }}
						</view>
					</view>
					<view class="item">
						<view class="">失败
						</view>
						<view class="moneyNum fail"><text class="unit">￥</text>{{ item.failAmount }}
						</view>
					</view>

				</view>
			</scroll-view>
		</view>
		<!--筛选弹框-->
		<uni-popup ref="alertDialog" type="top" background-color="#fff" borderRadius="0rpx 0rpx 20rpx 20rpx">
			<view class="popup-content">
				<view class="popupItem">
					<view class="title">
						支付方式
					</view>
					<view class="button-wrapper">
						<view v-for="(item, index) in buttons" :key="index" class="button"
							:class="{ checked: item.checked }" @click="itemChecked(item)">
							{{ item.label }}
						</view>
					</view>
					<view class="buttonBox">
						<view @click="reset" class="button button-reset">重置</view>
						<view @click="confirm" class="button button-confirm">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive
	} from "vue";
	import {
		showToast
	} from "@/utils/toast";
	import moment from "moment";
	import {
		getBeforeDate,
		getYear,
		getAfterYear
	} from "@/utils/date";
	import {

		orderByTimeQueryMonth
	} from "@/api/common.js";
	// import useList from "@/hook/useList";
	import {
		useStore
	} from "@/store";
	import {
		concat
	} from 'lodash'
	/** store实例 */
	const store = useStore();

	let range = ref([

		moment().format("YYYY"),
		getAfterYear(new Date(), 1, "year"),
	])
	let queryParams = ref({
		page: 1,
		size: 15,
		oemUserNo: 'BU100002',
		userId: store.userInfo.userId,
		startTime: range ? range.value[0] + "-01-01" : "",
		endTime: range ? range.value[1] + "-01-01" : "",
		payType: ""

	});
	const listData = ref([])
	const isRefreshing = ref(false)
	let total = ref(0)
	let isNoMoreData = ref(false)
	const orderItem = ref({})
	const date = ref(
		getYear(new Date())
	)

	onLoad(() => {
		console.log("range=" + JSON.stringify(range))
		getOrderList();
	});

	onShow(() => {

	});
	// 创建响应式数据  
	const alertDialog = ref();
	// 报表查询条件

	// 输入框内容
	let keyword = ref(null);


	function bindDateChange(e) { //选择日期
		date.value = e.detail.value
		console.log('date', date.value)
		queryParams.value.startTime = date.value + "-01-01";
		queryParams.value.endTime = (parseFloat(date.value) + 1) + "-01-01";
		refresh();
	}

	function filterEvent() {
		alertDialog.value.open()
		console.log("range", range)
	}
	// 选项被选中时
	function itemChecked(item) {

		// 多选
		item.checked = !item.checked;
		queryParams.value.payType = item.id;
		console.log("queryParams", queryParams)

	}

	function confirm() {
		alertDialog.value.close()
		refresh();
	}

	function onItemClick(item) {
		uni.navigateTo({
			url: "/pages/transaction/index?year=" + item.transTime
		})

	}
	// 查询账户列表
	function getOrderList() {
		orderByTimeQueryMonth(queryParams.value).then((res) => {
			listData.value = concat(listData.value, res.successTransOrderVos);
			orderItem.value = res;
		});
	}

	function refresh() {
		// 重置相关数据
		isRefreshing.value = true;
		total.value = 0
		listData.value = []
		isNoMoreData.value = false
		queryParams.value.page = 1

		// 请求报表数据
		getOrderList()
	}

	// 加载下一页数据
	function loadMore() {
		if (isNoMoreData.value) {
			showToast('没有更多数据')
		} else {
			queryParams.value.page++
			getOrderList()
		}
	}

	function goOrderDay() {

	}
	// 日期改变事件
	const change = (val) => {
		console.log("val-val", val)
		queryParams.value.startTime = val[0];
		queryParams.value.endTime = val[1];
		refresh();
	}
</script>
<style lang="scss" scoped>
	@import "./index.scss";
</style>
<style lang="scss"></style>